
<!-- 工单管理（小程序） -->
<template>
  <div class="page">
    <div class="nuclein-query">
      <div>工单管理（小程序）</div>
      <div style="margin-left: auto;">
        <el-button size="mini" type="primary" @click="handleAdd">添加工单</el-button>
      </div>
    </div>
    <div class="device-type">
      <p>
        <span>设备：</span>
        <el-select size="mini" v-model="pageLimit.deviceId" placeholder="请选择" @change="handlerChange" clearable>
          <el-option v-for="item in deviceIdList" :key="item.deviceId" :label="item.deviceName" :value="item.deviceId">
          </el-option>
        </el-select>
      </p>
      <p>
        <span>工单状态：</span>
        <el-select size="mini" v-model="pageLimit.maintenanceUserId" placeholder="请选择" @change="handlerMaintenance"
          clearable>
          <el-option v-for="item in workOrder" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </p>
      <p>
        <span>维修人员：</span>
        <el-select size="mini" v-model="pageLimit.workOrderState" placeholder="请选择" @change="handlerWorkOrder" clearable>
          <el-option v-for="item in laintenanceUserIdList" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </p>
    </div>
    <div class="content-row">
      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column prop="deviceName" label="设备名称" align="center" width="120">
        </el-table-column>
        <el-table-column prop="estateName" label="小区名称" align="center">
        </el-table-column>
        <el-table-column prop="count" label="工单状态" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.workOrderState == 0" type="warning">待接单</el-tag>
            <el-tag v-if="scope.row.workOrderState == 1" @click="handleOrderReceived(scope.row.workOrderId)">已接单</el-tag>
            <el-tag v-if="scope.row.workOrderState == 2" @click="handleOrderReceived(scope.row.workOrderId)" type="success">已完成</el-tag>
            <el-tag v-if="scope.row.workOrderState == 3" type="primary">待审核</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="maintenanceUserName" label="维修人员" align="center">
        </el-table-column>
        <el-table-column prop="releaseMode" label="发布方式" align="center" width="120">
          <template slot-scope="scope">
            <el-tag :type="scope.row.releaseMode ? 'warning' : 'success'">{{ !scope.row.releaseMode ? '系统发布' : '后台发布'
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="workOrderNumber" label="工单号" align="center" width="120">
      </el-table-column>
        <el-table-column prop="failureMsg" label="故障消息" align="center" width="120">
        </el-table-column>
        <el-table-column prop="demandMsg" label="需求" align="center" width="220">
        </el-table-column>
        <el-table-column prop="serviceTime" label="工单服务时间" align="center" width="160">
        </el-table-column>
        <el-table-column prop="serviceDurationStartTime" label="服务工期开始时间" align="center" width="160">
        </el-table-column>
        <el-table-column prop="serviceDurationEndTime" label="服务工期结束时间" align="center" width="160">
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageLimit.page"
        :page-sizes="[10, 20, 30, 40]" :page-size="pageLimit.size" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
    <!-- 弹窗 -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible" width="70%">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="160px" class="demo-ruleForm">
        <el-row>
          <el-col :span="span">
            <el-form-item label="故障信息" prop="failureMsg">
              <el-input v-model="ruleForm.failureMsg" placeholder="请输入故障信息"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="span">
            <el-form-item label="设备" prop="deviceId">
              <el-select v-model="ruleForm.deviceId" placeholder="请选择设备">
                <el-option v-for="item in deviceIdList" :key="item.deviceId" :label="item.deviceName"
                  :value="item.deviceId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="span">
            <el-form-item label="设备类型" prop="deviceType">
              <el-select v-model="ruleForm.deviceType" placeholder="请选择设备类型">
                <el-option v-for="item in deviceTypeList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="span">
            <el-form-item label="所在小区" prop="estateId">
              <el-select v-model="ruleForm.estateId" placeholder="请选择所在小区">
                <el-option v-for="item in estateIdList" :key="item.estateId" :label="item.estateName"
                  :value="item.estateId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="span">
            <el-form-item label="服务工期" prop="serviceDurationStartTime">
              <el-date-picker v-model="ruleForm.serviceDurationStartTime" type="datetime"
                placeholder="请选择服务工期"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="span">
            <el-form-item label="服务工期结束" prop="serviceDurationEndTime">
              <el-date-picker v-model="ruleForm.serviceDurationEndTime" type="datetime"
                placeholder="请选择服务工期结束"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="span">
            <el-form-item label="工单服务时间设定" prop="serviceTime">
              <el-date-picker v-model="ruleForm.serviceTime" type="datetime" placeholder="请设定工单服务时间"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="span">
            <el-form-item label="维修人员" prop="maintenanceUserId">
              <el-select v-model="ruleForm.maintenanceUserId" placeholder="请选择所在小区">
                <el-option v-for="item in laintenanceUserIdList" :key="item.value" :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="需求" prop="demandMsg">
          <el-input v-model="ruleForm.demandMsg" placeholder="请输入需求"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">提 交</el-button>
          <el-button @click="resetForm()">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-drawer title="工单详情" :visible.sync="drawer" :direction="direction" :before-close="handleClose" size="50%">
      <el-descriptions title="" border :column="2" direction="vertical">
        <el-descriptions-item label="详细地址">{{ gridData.areaDetail }}</el-descriptions-item>
        <el-descriptions-item label="接单时间">{{gridData.receivingTime}}</el-descriptions-item>
        <el-descriptions-item label="完成时间">{{gridData.completionTime}}</el-descriptions-item>
        <el-descriptions-item label="验收时间">{{gridData.acceptanceTime}}</el-descriptions-item>
        <el-descriptions-item label="验收状态">
            <el-tag v-if="gridData.acceptanceState === 0" size="small">未验收</el-tag>
            <el-tag v-if="gridData.acceptanceState === 1" size="small">验收通过</el-tag>
            <el-tag v-if="gridData.acceptanceState === 2" size="small">验收未通过</el-tag>
            <el-tag v-if="gridData.acceptanceState === 3" size="small">待验收</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="照片">
          <img :src="gridData.acceptanceState" alt="">
        </el-descriptions-item>
    </el-descriptions>
      <!-- <div class="dialog_butt">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary">确定</el-button>
      </div> -->
    </el-drawer>
  </div>
</template>

<script>
import { workList, workListAdd, workInfoList, maintenance, getEstate, getEquipment } from '../../api/api'
import commonFunction from '../../utils/commonFunction'
import commonData from '../../utils/commonData'
export default {

  data () {
    return {
      pageLimit: {
        maintenanceUserId: '', // 工单维护人员
        workOrderState: '', // 工单状态
        deviceId: '', // 设备ID
        page: 1,
        size: 10
      },
      gridData: [], // 抽屉详情数据
      total: 10,
      span: 11,
      tableData: [],
      deviceIdList: [],
      estateIdList: [],
      laintenanceUserIdList: [],
      workOrder: commonData.workOrderStates,
      deviceTypeList: commonData.equipmentTypeList,
      title: '添加工单任务',
      drawer: false,
      direction: 'rtl',
      dialogFormVisible: false,
      ruleForm: {
        failureMsg: '', //  故障的信息
        demandMsg: '', //  需求
        serviceTime: '', //  工单服务时间设定
        serviceDurationStartTime: '', //  服务工期
        serviceDurationEndTime: '', //  服务工期结束
        deviceId: '', //  设备ID
        estateId: '', //  小区ID
        maintenanceUserId: '', //  维修人员
        deviceType: '', //  设备类型
        categoryId: '', //  所属分类
        aTaccifcationId: '' //  所属分级
      },
      rules: {
        failureMsg: [{ required: true, message: '请输入故障信息', trigger: 'blur' }],
        demandMsg: [{ required: true, message: '请输入需求', trigger: 'change' }],
        serviceTime: [{ required: true, message: '请设定工单服务时间', trigger: 'change' }],
        serviceDurationStartTime: [{ required: true, message: '请选择服务工期', trigger: 'blur' }],
        serviceDurationEndTime: [{ required: true, message: '请选择服务工期结束', trigger: 'blur' }],
        deviceId: [{ required: true, message: '请选择设备', trigger: 'blur' }],
        estateId: [{ required: true, message: '请选择小区', trigger: 'blur' }],
        deviceType: [{ required: true, message: '请选择设备类型', trigger: 'blur' }],
        maintenanceUserId: [{ required: true, message: '请选择维修人员', trigger: 'blur' }]
      }
    }
  },
  created () {
    this.gitList()
    this.getMaintenance()
  },
  watch: {
    dialogFormVisible (newVal, oldVal) {
      if (!newVal) {
        this.ruleForm = {
          failureMsg: '', //  故障的信息
          demandMsg: '', //  需求
          serviceTime: '', //  工单服务时间设定
          serviceDurationStartTime: '', //  服务工期
          serviceDurationEndTime: '', //  服务工期结束
          deviceId: '', //  设备ID
          estateId: '', //  小区ID
          maintenanceUserId: '', //  维修人员
          deviceType: '', //  设备类型
          categoryId: '', //  所属分类
          aTaccifcationId: '' //  所属分级
        }
      }
    }
  },
  methods: {
    handlerChange (e) {
      this.pageLimit.deviceId = e
      this.gitList()
    },
    handlerMaintenance (e) {
      this.pageLimit.maintenanceUserId = e
      this.gitList()
    },
    handlerWorkOrder (e) {
      this.pageLimit.workOrderState = e
      this.gitList()
    },
    // 添加工单
    handleAdd () {
      this.dialogFormVisible = !this.dialogFormVisible
    },
    // 获取
    gitList () {
      workList({ ...this.pageLimit }).then(res => {
        if (res.code == 0) {
          const { total, records } = res.page
          this.tableData = records.map(ite => {
            const serviceTime = commonFunction.getTimeFormat(+new Date(ite.serviceTime), 'YYYY-MM-DD hh:mm:ss')
            const serviceDurationStartTime = commonFunction.getTimeFormat(+new Date(ite.serviceDurationStartTime), 'YYYY-MM-DD hh:mm:ss')
            const serviceDurationEndTime = commonFunction.getTimeFormat(+new Date(ite.serviceDurationEndTime), 'YYYY-MM-DD hh:mm:ss')
            return {
              ...ite,
              serviceTime,
              serviceDurationStartTime,
              serviceDurationEndTime
            }
          })
          this.total = total
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 获取维修人员列表、设备列表、小区列表
    getMaintenance () {
      getEquipment().then(res => {
        if (res.code === 0) {
          this.deviceIdList = res.list
        }
      })
      getEstate().then(res => {
        if (res.code === 0) {
          this.estateIdList = res.list
        }
      })
      const data = {
        page: 1,
        size: 9999
      }
      maintenance({ ...data }).then(res => {
        if (res.code == 0) {
          const { records } = res.page
          this.laintenanceUserIdList = records.map(item => {
            return {
              label: item.userName,
              value: item.userId
            }
          })
        }
      })
    },
    // 提交
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const data = {
            workOrderId: this.ruleForm.workOrderId ? this.ruleForm.workOrderId : null,
            ...this.ruleForm
          }
          workListAdd(data).then(res => {
            if (res.code === 0) {
              this.dialogFormVisible = false
              this.$message.success(data.workOrderId ? '编辑成功' : '添加成功')
              this.gitList()
            } else {
              this.$message.error(res.msg)
            }
          })
        } else {
          return false
        }
      })
    },
    // 取消
    resetForm () {
      this.dialogFormVisible = false
    },
    handleCancel () {
      this.drawer = !this.drawer
    },
    // 抽屉关闭
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => { })
    },
    // 跳转到详情
    handleOrderReceived (id) {
      this.drawer = !this.drawer
      workInfoList({ workOrderId: id }).then(res => {
        if (res.code === 0) {
          this.gridData = res.info
        }
      })
    },
    // 分页
    handleSizeChange (val) {
      this.pageLimit.size = val
      this.gitList()
    },
    handleCurrentChange (val) {
      this.pageLimit.page = val
      this.gitList()
    }
  }
}
</script>

<style scoped>
.page {
  position: relative;
  height: 100%;
}
.dialog_butt{
  height: 60px;
  width: 100%;
  position: fixed;
  bottom: 0px;
}
.nuclein-query {
  display: flex;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #DCDFE6;
}

.device-type {
  display: flex;
  align-items: center;
  padding: 20px 20px 10px 20px;
}

.device-type>p {
  margin-right: 20px;
}

.content-row {
  overflow: hidden;
}

/* 分页 */
.pagination {
  width: 100%;
  padding: 20px;
  border-top: 1px solid #DCDFE6;
}
 ::v-deep .el-drawer__body{
  padding: 20px;
}

</style>
